<template>
  <div class="goodsInfo-main">
    <div class="header">
      <div class="rotation">
        <van-swipe :autoplay="1500" :height="230">
          <van-swipe-item v-for="(image, index) in navListImg" :key="index">
            <img v-lazy="image" @click="showHeadImg()"/>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="con-box">
      <div class="title">
        {{goodsInfo.title}}
        <span>【{{goodsInfo.nick}}】</span>
      </div>
      <div class="con">
        <div class="con-l">
          <p>
            <span class="text">折扣价¥</span>
            <span class="price">{{goodsInfo.zk_final_price}}</span>
            <span class="old-price">原价{{goodsInfo.reserve_price}}</span>
          </p>
        </div>
        <div class="con-r">
          月售{{goodsInfo.volume}}件
        </div>
      </div>
    </div>
    <van-divider>相似推荐</van-divider>
  </div>
</template>

<script>
import { Goods } from '@/api/Goods';
let GoodsObj = new Goods();
import Vue from 'vue';
import { Lazyload, ImagePreview } from 'vant';
Vue.use(Lazyload);

export default {
  name: "info",
  data() {
    return {
      couponShareUrl: '',//领劵购买链接
      createTokenUrl: '',//生成淘口令链接
      createSpreadUrl: '',//生成短链接的商品链接
      goodsInfo: {},
      navListImg: [],
    };
  },
  mounted(){
    // 初始时加载商品数据
    this.loadGoodsInfo();
  },
  methods:{
    loadGoodsInfo() {
      let itemId = this.$route.query.item_id;
      this.couponShareUrl = this.$route.query.coupon_share_url;
      this.createTokenUrl = this.$route.query.coupon_share_url;
      this.createSpreadUrl = this.$route.query.coupon_share_url;
      GoodsObj.getGoodsInfo({
        'num_iids': itemId
      }).then(res => {
        this.goodsInfo = res;
        this.navListImg = res.small_images.string
      })
    },
    listToInfo(itemId, couponShareUrl) {
      this.couponShareUrl = couponShareUrl;
      GoodsObj.getGoodsInfo({
        'num_iids': itemId
      }).then(res => {
        this.goodsInfo = res;
        this.navListImg = res.small_images.string
      });
      this.toTop();
    },
    toTop() {//滚动到顶部
      //此处true 需要加上 不加滚动事件可能绑定不成功
      window.addEventListener("scroll", this.handleScroll, true);
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      //实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    showHeadImg(){
      ImagePreview(this.navListImg);
    }
  },
}
</script>

<style scoped>
.header{
  width: 100%;
}
.header .rotation img{
  height: 100%;
}
.goodsInfo-main .con-box{
  font-size: 14px;
}
.goodsInfo-main .con-box .title{
  font-size: 15px;
  padding:5px 10px;
  line-height: 24px;
  font-weight: 500;
}
.goodsInfo-main .con-box .title span{
  color:red;
}
.goodsInfo-main .con-box .con{
  line-height: 24px;
  padding:10px 15px 0px 15px;
  display: flex;
  flex-direction:row;
  justify-content: space-between;
}
.goodsInfo-main .con-box .con .con-l .text{
  color:#FF0036;
}
.goodsInfo-main .con-box .con .con-l .price{
  font-size: 18px;
  font-weight: 700;
  color:#FF0036;
}
.goodsInfo-main .con-box .con .con-l .old-price{
  text-decoration:line-through;
  margin-left:5px;
}
</style>